<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .box{
            width:90%;
            height:300px;
            border:1px solid yellowgreen;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>
        <my-head id="2204">
            <h2>Hello world</h2>
        </my-head>
        <hr>
        <Home id="2204" msg="这是啥">
            <template v-slot:banner>
                <h2>这是轮播数据</h2>
                <h2>这是第一页轮播数据</h2>
                <h2>这是第二页轮播数据</h2>
            </template>
        </Home>
        <hr>
        <Home id="2204" msg="这是啥">
            <h2>WH2204 - daydayup</h2>
            <h2>WH2204 - YYDS</h2>
            <h2>WH2204 - ILIKEYOU</h2>

            <template #banner>
                <h2>Mine</h2>
                <h2>News</h2>
                <h2>CIty</h2>
                <h2>Image</h2>
            </template>
        </Home>

        <user></user>

        <user>
            <template v-slot:default="scope">
                <h2>年纪：{{scope.info.age}}</h2>
            </template>
        </user>

        <user>
            <template #default="scope">
                <h2>口号：{{scope.info.word}}</h2>
            </template>
        </user>

        <user>
            <template #default="scope">
                <h2>号码：{{scope.info.phone}}</h2>
                <h2>person---{{scope.person}}</h2>
            </template>
        </user>


    </div>

    <template id="myhead">
        <div>
            <h2>myhead - myhead - wh2204 daydayup</h2>
        </div>
    </template>

    <template id="home">
        <div>
            <h2>Home</h2>
            <h2>主页 内容</h2>
            <h2>id={{id}}</h2>
            <h2>msg={{msg}}</h2>
            <div class="box">
                <slot>这里有默认的内容,如果有插槽就会被覆盖,反之一样(匿名插槽)</slot>
            </div>
            <div class="box">
                <slot name="banner">这里有Banner轮播的内容,如果有具名插槽就会被覆盖,反之一样(具名插槽)</slot>
            </div>
        </div>
    </template>

    <template id="user">
        <div>
            <h2>用户信息---user</h2>
            <h2>soll</h2>
            <div >
                <slot :info="info" person="person2204">用户名：{{info.name}}</slot>
            </div>
        </div>
    </template>

    <script>
        // 空的Vue实例当做 事件总线  (emit on once)
        const bus = new Vue()   

        Vue.component("myHead",{
            template:"#myhead",
        })
        Vue.component('Home',{
            template:'#home',
            props:{
                id:String,
                msg:String
            }
        })

        Vue.component('User',{
            template:'#user',
            data(){
                return {
                    //组件内部的数据
                    info:{
                        age:19,
                        name:'Dio',
                        word:'so easy',
                        phone:'12312312312'

                    }
                }
            }
        })
        const vm = new Vue({

            data:{
                title:"组件插槽  slot"
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML=this.title
            },

        }).$mount('#app')
    </script>
    <!-- 
        Vue 实现了一套内容分发的 API slot  将 <slot> 元素作为承载分发内容的出口
        插槽  slot 专门接受 从父组件传递来的 (props+slot ) html模板  内容分发 
        
        父组件给子组件传递数据  props 
        父组件 想给子组件 传递 模板(html标签)   用 slot 来接受 内容分发 模块 
        slot 父组件可以把模板标签 动态分发子组件  子组件放到指定的位置区域 (slot 插槽)

        具名插槽 slot  精准投放  定位   name="a"
        template v-slot=  "a"
        name="menu"  v-slot:menu   #menu 

        作用域插槽  把子组件的数据通过插槽传递给父组件 由父组件决定显示什么数据      

        以后封装组件   props 70%  slot 30%
     -->
</body>
</html>